<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>实时网速</title>
    <link rel="stylesheet" href="../common/style/reset.css" />
    <link rel="stylesheet" href="../common/style/xiaolai.css">
    <style>

      html,body{
        border-radius: 5px;
      }

      .view{ 
        width: 100%;
        height: 100%;
        font-family:'Xiaolai SC';
        background-color: rgba(0, 0, 0, 0.3);
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: 20px;
        /* padding: 0 10px; */
      }

      .internet-box > div{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
      }

      .internet-box > div > div{
        display: flex;
        width: 95px;
        margin-right: 0px;
        align-items: center;
      }
      
      .internet-box > div > div ~ div{
        margin-left: 10px;
      }

      @media screen and (max-width: 201px) {

        .internet-box > .row > div ~ div{
          margin-left: 0;
        }

        .internet-box{
          flex-wrap: nowrap;
        }

        .up-box,
        .do-box{
          display: flex;
          align-items: center;
          flex-wrap: nowrap;
        }
      }

      


    </style>
  </head>
  <body>
    <div class="view">
      <div class="internet-box">
        <div class="row">
          <div class="up-box"><div>上传：</div><span class="up">0.00 KB/s</span></div>
          <div class="do-box"><div>下载：</div><span class="do">0.00 KB/s</span></div>
        </div>
        <div class="row">
          <div class="cpu-box"><div>CPU：</div><span class="cpu">- - %</span></div>
          <div class="mem-box"><div>内存：</div><span class="mem">- - %</span></div>
        </div>
      </div>
    </div>
  </body>
  <script type="module" src="../common/js/setting.js"></script>
  <script type="module" src="../common/js/menu.js"></script>
  <script type="module" src="../common/js/move.js"></script>
  <script type="module" src="../common/js/counter.js"></script>
  <script type="module" async >
    import IconSvg from '../components/IconSvg/IconSvg.js'
    customElements.define('icon-svg', IconSvg);

    const up = document.querySelector('.up');
    const doo = document.querySelector('.do');
    const cpuEl = document.querySelector('.cpu');
    const memEl = document.querySelector('.mem');

    let previousData = await window.getNetworkStats();
    let data;

    const networkHandler = async()=>{
      const currentData = await window.getNetworkStats();
      const speeds = calculateSpeed(previousData, currentData, 1);
      previousData = currentData;

      let rxBytesPerSecKB;
      if((speeds.rxBytesPerSec / 1024) >= 100){
        rxBytesPerSecKB = (speeds.rxBytesPerSec / 1024).toFixed(0);
      }else if((speeds.rxBytesPerSec / 1024) >= 10) {
        rxBytesPerSecKB = (speeds.rxBytesPerSec / 1024).toFixed(1);
      }else{
        rxBytesPerSecKB = (speeds.rxBytesPerSec / 1024).toFixed(2);
      }
      let txBytesPerSecKB;
      if((speeds.txBytesPerSec / 1024) >= 100){
        txBytesPerSecKB = (speeds.txBytesPerSec / 1024).toFixed(0);
      }else if((speeds.txBytesPerSec / 1024) >= 10) {
        txBytesPerSecKB = (speeds.txBytesPerSec / 1024).toFixed(1);
      }else{
        txBytesPerSecKB = (speeds.txBytesPerSec / 1024).toFixed(2);
      }
      let rxBytesPerSecMB;
      if((speeds.rxBytesPerSec / 1024 / 1024) >= 100){
        rxBytesPerSecMB = (speeds.rxBytesPerSec / 1024 / 1024).toFixed(0);
      }else if((speeds.rxBytesPerSec / 1024 / 1024) >= 10) {
        rxBytesPerSecMB = (speeds.rxBytesPerSec / 1024 / 1024).toFixed(1);
      }else{
        rxBytesPerSecMB = (speeds.rxBytesPerSec / 1024 / 1024).toFixed(2);
      }
      let txBytesPerSecMB;
      if((speeds.txBytesPerSec / 1024 / 1024) >= 100){
        txBytesPerSecMB = (speeds.txBytesPerSec / 102 / 1024).toFixed(0);
      }else if((speeds.txBytesPerSec / 1024 / 1024) >= 10) {
        txBytesPerSecMB = (speeds.txBytesPerSec / 1024 / 1024).toFixed(1);
      }else{
        txBytesPerSecMB = (speeds.txBytesPerSec / 1024 / 1024).toFixed(2);
      }
      if(parseFloat(rxBytesPerSecKB) > 900){
        doo.innerHTML = Math.abs(rxBytesPerSecMB) + ' MB/s';
      }else{
        doo.innerHTML = Math.abs(rxBytesPerSecKB) + ' KB/s';
      };
      if(parseFloat(txBytesPerSecKB) > 900){
        up.innerHTML = Math.abs(txBytesPerSecMB) + ' MB/s';
      }else{
        up.innerHTML = Math.abs(txBytesPerSecKB) + ' KB/s';
      }; 
    }

    const cpuHandler = async()=>{
      let usage = await window.osu.cpu.usage();
      cpuEl.innerText = `${parseInt(usage)} %`;
    }

    const memHandler = async()=>{
      let memInfo = await window.osu.mem.info();
      memEl.innerText = `${parseInt(memInfo.usedMemPercentage)} %`;
    }

    setInterval(async()=>{
      networkHandler();
      cpuHandler();
      memHandler(); 
    },1000)

    window.getData = ()=>data;


  </script>
</html>
